<template>
    <ScaleScreen>
        <div class="screen">
            <Header/>
            <div class="screen-main">
                <div class="screen-left">
                    <Left/>
                </div>
                <div class="screen-center">
                    <Center/>
                </div>
                <div class="screen-right">
                    <Right/>
                </div>
            </div>
        </div>
    </ScaleScreen>
</template>

<script setup lang="ts">
    import ScaleScreen from "@/components/scale-screen";
    import Header from "@/views/screen/components/Header.vue";
    import Left from "@/views/screen/components/Left/index.vue";
</script>

<style scoped lang="scss">
    .screen {
        --ds-screen-width: 1920px;
        --ds-screen-height: 1080px;
        --ds-header-height: 72px;
        --ds-block-bg: #222733;
        --ds-screen-bg: rgb(22, 21, 24);
        --ds-screen-text-color: #fff;
        width: 100%;
        height: 100%;
        position: absolute;
        padding: 0 20px;
        background: var(--ds-screen-bg);
        color: var(--ds-screen-text-color);
        &-main {
            position: relative;
            display: flex;
            height: calc(100% - var(--ds-header-height));
        }
        &-center {
            flex: 1;
            width: calc(var(--ds-screen-width) - 1000px);
        }
        &-left,
        &-right {
            width: 460px;
        }
    }
</style>